今天來介紹 let/const 的暫時死區(Temporal Dead Zone,TDZ)
,這是 ES6 中對作用域新的專用語,翻成中文就是「時間上暫時無法達到的區域」,簡稱為「暫時死區」
,是不是聽起來怪恐怖的還有點中二 XDD?今天就來聊聊這個 TDZ 是什麼意思唄!不過那之前我們要先來了解變數 var 的提升(Hoisting)
。
var
的提升(Hoisting)在 JavaScript 中對於變數 var
的宣告有一個奇妙的特性,我們先來看看下面的例子:
console.log(name);
// Uncaught ReferenceError: a is not defined
因為變數 name
還沒宣告,所以會出現 ReferenceError
錯誤訊息,那下面的例子呢:
console.log(name); //undefined
var name;
喔喔喔喔喔!!!明明在 console.log 的地方,還沒宣告變數 name
,但卻出現了 undefined
!這個奇怪的現象!就稱做是變數提升 Hoisting
歐!!
註:undefined 意思是變數沒有被宣告,或者是已經宣告了,但是沒有賦值。
那我們再看看下面的例子:
console.log(name); //undefined
var name = 'how哥';
ㄟˊ~?答案竟然是 undefined
,不是 how哥
?說好的變數提升呢?
哦~~~那是因為提升還有一個奇耙的特性就是:只有變數的宣告會提升,賦值不會提升
!所以我們可以想像
成上面的程式碼在瀏覽器執行時其實是長這樣:
var name;
console.log(name); //undefined
name = 'how哥';
以上就是關於變數提升特性的簡介,如果想了解得更深入,這邊來個好文推薦 ^__^: TechBridge:我知道你懂 hoisting,可是你了解到多深?
let/const
的暫時死區(Temporal Dead Zone,TDZ)你可能會問:竟然 var
有提升,那 let/const
有嗎?
試給你看嚕:
console.log(name); // Uncaught ReferenceError: Cannot access 'name' before initialization
let name;
你可能會想說:「哦~所以 let 沒有變數提升!」,那你就太天真了,其實在 let/const
中也存在變數提升的,並且會提升到區塊作用域
的頂部,但是他還有另一個概念就是「暫時死區」
,也就是如果在宣告變數之前使用變數,這個變數就是存在「暫時死區」中無法存取
!這時候使用它就會報錯 ReferenceError
。
暫時死區的特性可以幫助我們養成在變數還沒宣告之前不要使用他的好習慣,讓程式碼可讀性提高!更好理解,這也是建議使用 let/const
宣告變數的原因之一哦!
默認使用 const
,如果變數是需要更新或改變的時候就使用 let
,這麼做就相當的顯而易見,知道誰不會被改變、誰會被改變,並且因為 TDZ
的特性,不會有變數未宣告卻能存取的特性,也不會有重複宣告的問題,因此建議大家以後不要使用 var
做宣告囉,var
可能會產生重複宣告的問題之外,若在宣告之前使用,還會有找不到變數宣告的地方的問題,搞得大家很亂、很痛苦 ><。
關於 let/const 介紹 及跟 var 的差別
,可以參考我之前寫的文章 ^____^ :變數宣告 - let、const 哪裡好?跟 var 說掰掰
簡單整理一個表格給大家參考!歡迎補充 or 錯誤提醒~謝謝各位!
參考文章
TechBridge:我知道你懂 hoisting,可是你了解到多深?
EddyChang:理解ES6中的暫時死區(TDZ)
有提到 TechBridge 那篇文章就給推 讚讚讚
然後「那我們在看看下面的例子:」,應該是「再」喔
糾察隊來了 XDDD !!!
已修正,感謝大大~~~